<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    .BMap_cpyCtrl {
        display: none;
    }
    #allmap{
        position: relative;
    }
    .anchorBL {
        display: none;
    }
    .tree{
        position:absolute;
        top:0;
        left: 0;
        z-index: 1000;
    }
	</style>
    <!-- <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4HzsadCh4FDh1Eukq2shC3WT"></script>
	<title>地图展示</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // initWebSocket();
    // var websock = null
    // function getdata(){
    //     var datas = JSON.parse(localStorage.getItem('data'))
    //     console.log(datas)
    //         if(datas.cmd == 'sendGarbagebinOpenStatuUp'){
    //             console.log(datas.data.state)
    //             if(datas.data.state == 1){
    //                 // console.log('打开')
    //             }else{
    //                 // console.log('guanb')
    //             }
    //         } else if(datas.cmd == 'sendGarbagebinStatuInfo'){
    //             if(datas.data.full == 1){
    //                 // console.log('溢满')
    //             }else{
    //                 // console.log('唯一满')
    //             }
    //         }
    // }
    var theCity = "天津";
    var map;
    initMap();
    // map = new BMap.Map("allmap");
    // map.centerAndZoom(new BMap.Point(117.183189,39.094076), 11);

    // 随机向地图添加25个标注
	var bounds = map.getBounds();
	var sw = bounds.getSouthWest();
	var ne = bounds.getNorthEast();
	var lngSpan = Math.abs(sw.lng - ne.lng);
	var latSpan = Math.abs(ne.lat - sw.lat);
	for (var i = 0; i < 25; i ++) {
        addMarker(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
    }
    
    //增加标注
    function addMarker(paraLat, paraLog){        
        var pt = new BMap.Point(paraLat, paraLog);// 创建点
        console.log(localStorage.getItem('data'))
        // var myIcon = new BMap.Icon("https://www.easyicon.net/api/resizeApi.php?id=6086&size=32", new BMap.Size(32,32));
        var marker2 = new BMap.Marker(pt/*,{icon:myIcon}*/);  
        map.addOverlay(marker2);   
    }
    
    //增加圆
    function addCircle(paraLat, paraLog){
        var pt = new BMap.Point(paraLat, paraLog);// 创建点
        var circle = new BMap.Circle(point,500);
	    map.addOverlay(circle);            
    }

    //增加多边形
    function addPolygon(){
        var polygon = new BMap.Polygon([
		new BMap.Point(116.387112,39.920977),
		new BMap.Point(116.385243,39.913063),
		new BMap.Point(116.394226,39.917988),
		new BMap.Point(116.401772,39.921364),
		new BMap.Point(116.41248,39.927893)
	], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});  //创建多边形
	map.addOverlay(polygon);   
    }

    function initMap(){
        // 百度地图API功能
        map = new BMap.Map("allmap");    // 创建Map实例
        map.centerAndZoom(new BMap.Point(117.183189,39.094076),15);;  // 初始化地图,设置中心点坐标和地图级别
        map.setCurrentCity(theCity);          // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        map.openInfoWindow(infoWindow, map.getCenter());   // 打开信息窗口
        //设置地图样式
        map.setMapStyle({
            styleJson: [
                {
                    "featureType": "poilabel",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "off"
                    }
                }
            ]
        });

        //添加地图类型控件
        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.MapTypeControl({
            mapTypes:[
                BMAP_NORMAL_MAP
                ,BMAP_SATELLITE_MAP  
                // ,BMAP_HYBRID_MAP
            ]}));	  
    }
</script>